<template>
  <div class="page_box">
    <div class="title">编辑产品</div>

    <div class="content">
      <el-form ref="form" :model="form" :rules="formRules" label-width="120px">
        <el-form-item label="产品logo：" prop="logo">
          <el-upload
            :action="FILEUPLOADURL"
            :headers="headers"
            :limit="1"
            :file-list="fileList"
            list-type="picture-card"
            :on-success="onSuccess"
            :on-remove="onRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="产品名称：" prop="name">
          <el-input v-model="form.name" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="宣传语：" prop="tags">
          <el-input v-model="form.tags" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="产品期数：" prop="periods">
          <el-input v-model="form.periods" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="产品利率：" prop="dayInterestRate">
          <el-input v-model="form.dayInterestRate" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="最高额度：" prop="maxAmount">
          <el-input v-model="form.maxAmount" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="产品级别：" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio :label="0">普通会员</el-radio>
            <el-radio :label="1">VIP会员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="产品链接：" prop="url">
          <el-input v-model="form.url" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="排序号：" prop="orderNum">
          <el-input v-model="form.orderNum" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button
            type="primary"
            size="small"
            :loading="loading"
            @click="saveInfo"
            >保存</el-button
          >
          <el-button size="small" @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  FILEUPLOADURL,
  ADDPRODUCTINFO,
  GETPRODUCTINFO,
  BASEURL,
  IMAGEPATH,
  EDITPRODUCTINFO
} from "@/http/interface";
import { showToast } from "@/common/util";
export default {
  data() {
    return {
      form: { type: 0 },
      formRules: {
        logo: [
          { required: true, message: "请上传产品logo", trigger: "change" },
        ],
        name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
        tags: [{ required: true, message: "请输入宣传语", trigger: "blur" }],
        periods: [
          { required: true, message: "请输入产品期数", trigger: "blur" },
        ],
        maxAmount: [
          { required: true, message: "请输入最高额度", trigger: "blur" },
        ],
        dayInterestRate: [
          { required: true, message: "请输入产品利率", trigger: "blur" },
        ],
        url: [{ required: true, message: "请输入产品链接", trigger: "blur" }],
        type: [
          { required: true, message: "请选择产品级别", trigger: "change" },
        ],
        orderNum: [
          { required: true, message: "请输入排序号", trigger: "blur" },
        ],
      },
      FILEUPLOADURL: FILEUPLOADURL,
      fileList:[],
      headers: "",
      loading: false,
    };
  },
  created() {
    console.log(this.$route.query);
    let token = sessionStorage.getItem("token");
    this.headers = { Authorization: token };
    this.getInfo();
  },
  mounted() {},
  methods: {
    // 返回
    goBack() {
      this.$router.go(-1);
    },

    // 监听文件上传成功
    onSuccess(res) {
      if (res.code == 200) {
        this.form.logo = res.data;
        this.$refs.form.clearValidate("logo");
      }
    },

    //监听文件删除
    onRemove() {
      delete this.form.logo;
    },

    // 保存数据
    saveInfo() {
      let _this = this;
      _this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }

        let o = _this.form;
        _this.loading = true;
        EDITPRODUCTINFO(o).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "编辑成功",
              type: "success",
            });
            _this.goBack();
          }
        });
      });
    },

    // 获取产品信息
    getInfo() {
      let id = this.$route.query.id;
      GETPRODUCTINFO({ id: id }).then((res) => {
        let obj = res.data || {}
        this.form = obj;
        this.fileList = [{name:obj.logo,url:IMAGEPATH + obj.logo}]
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  position: relative;
  padding: 20px;
}
.title:after {
  display: block;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #d8d8d8;
  transform: scaleY(0.5);
}
.content {
  padding: 30px 0;
  .a_input {
    width: 300px;
  }
}
</style>
